<template>
  <TabBox>
    <TabItem
      v-for="(tab, index) in tabs"
      :key="tab.name"
      :icon="tab.icon"
      @click="handclick(index)"
      :class="active===index ? 'active' : ''"
      >{{ tab.name }}</TabItem
    >
  </TabBox>
</template>

<script setup>
import TabBox from './components/TabBox.vue';
import TabItem from './components/TabItem.vue';
import { ref } from 'vue';
const tabs = ref([
  { name: '首页', icon: 'house' },
  { name: '搜索', icon: 'magnifying-glass' },
  { name: '购物车', icon: 'cart-shopping' },
  { name: '我的', icon: 'circle-user' },
]);
const active = ref(0);
const handclick = (index) => {
  active.value = index;
};
</script>

<style scoped>
.active {
  cursor: default;
  color: #486eee;
}
</style>
